<template>
  <div class="colWrapper wrapper">
    <div>
      <!--面包屑-->
      <div>
        <Breadcrumb>
          <BreadcrumbItem>机器管理</BreadcrumbItem>
          <BreadcrumbItem>批量更新</BreadcrumbItem>
        </Breadcrumb>
      </div>

    </div>

    <div class="colWrapper bodyCon">
      <div class="subTitleCon">
        <span>批量更新</span>
      </div>
      <div class="colWrapper subBodyCon">
        <div class="colWrapper">
          <div class="rowWrapper">
            <div class="rowWrapper serchForm">
              <div class="rowWrapper">
                <div>
                  <span>机器名:</span>
                </div>
                <input class="itemInput"/>
              </div>
              <div class="itemBtn">
                <Button type="primary">搜索</Button>
              </div>
            </div>
            <div class="tips">
              <span>注释：（仅作为解释说明）
1.所有有关机器名的都使用模糊搜索
：%关键字%
2.列表按照设备名称排序</span>
            </div>
          </div>
          <!--          表格-->
          <div>
            <div class="selectAll">
              <Button type="primary">全选</Button>
            </div>
            <div class="colWrapper">
              <Table :columns="columns1" :data="data"></Table>
              <div class="page">
                <Page :total="page.count"
                      :page-size="20"
                      :page-size-opts="[20,30,40,50,100]"
                      show-elevator
                      show-sizer
                      show-total
                      @on-change="handleCurrentChange"
                      @on-page-size-change="handleSizeChange"/>
              </div>
            </div>
          </div>
        </div>
        <div class="rowWrapper submitButtom">
          <Button type="primary">批量更新</Button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '../../style/main.css'

export default {
  data() {
    return {
      columns1: [
        {
          title: "选择",
          key: "id",
          minWidth: 150,
          align: "center"
        },
        {
          title: "机器名",
          key: "id",
          minWidth: 150,
          align: "center"
        },
        {
          title: "更新状态",
          key: "id",
          minWidth: 150,
          align: "center"
        },
        {
          title: "操作",
          key: "id",
          minWidth: 150,
          align: "center"
        },
      ],
      data: [],
      page: {
        count: 1,
        limit: 10,
        page: 1
      }
    }
  },
  methods: {
    handleCurrentChange() {

    },
    handleSizeChange() {

    }
  }
};
</script>

<style scoped>
.wrapper {
  align-items: flex-start;
}

.submitButtom {
  margin-top: 20px;
  align-self: flex-end;
}

.bodyCon {
  width: 688px;
  margin-top: 20px;
}

.subTitleCon {
  align-self: flex-start;
}

.subTitleCon > span {
  color: rgba(80, 80, 80, 1);
  font-size: 40px;
}

.subBodyCon {
  width: 100%;
}

.serchForm {
  /*width: 80%;*/
}

.itemInput {
  margin-left: 20px;
}

.itemBtn {
  margin-left: 20px;
}

.tips {
  margin-left: 20px;
  width: 40%;
}

.selectAll {
  align-self: flex-start;
}

.page {
  margin-top: 10px;
}
</style>
